<template>
	<div>
		<TypeNav />

		<div class="main">
			<div class="py-container">
				<!--bread-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<a href="#">全部结果</a>
						</li>
					</ul>

					<ul class="fl sui-tag">
						<!-- 三级分类的面包屑 -->
						<li class="with-x" v-if="searchParams.categoryName">
							{{ searchParams.categoryName }}<i @click="removeCategoryName">x</i>
						</li>
						<!-- 搜索关键字的面包屑 -->
						<li class="with-x" v-if="searchParams.keyword">
							{{ searchParams.keyword }}<i @click="removeKeyword">x</i>
						</li>
						<!-- tradenark字段的面包屑 -->
						<li class="with-x" v-if="searchParams.trademark">
							{{ searchParams.trademark.split(':')[1] }}<i @click="removeTrademark">x</i>
						</li>
						<template v-if="searchParams.props.length">
							<li class="with-x" v-for="(item, index) in searchParams.props" :key="index">
								{{ item.split(':')[1] }}<i @click="removeAttrInfo(index)">x</i>
							</li>
						</template>
					</ul>
				</div>

				<!--selector-->
				<SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"></SearchSelector>

				<!--details-->
				<div class="details clearfix">
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li :class="{ active: isOne }" @click="changeOrder(1)">
									<a
										><span>综合</span
										><span v-if="isOne"><span v-if="isAsc">⬆</span><span v-if="isDesc">⬇</span></span></a
									>
								</li>

								<li :class="{ active: isTwo }" @click="changeOrder(2)">
									<a
										><span>价格</span
										><span v-if="isTwo"><span v-if="isAsc">⬆</span><span v-if="isDesc">⬇</span></span></a
									>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品；列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="item in goodsList" :key="item.id">
								<div class="list-wrap">
									<div class="p-img" @click="goDetail(item.id)">
										<a href="javascript:;"><img v-lazy="item.defaultImg" /></a>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i style="margin-left: 5px">{{ item.price }}.00</i>
										</strong>
									</div>
									<div class="attr">
										<a target="_blank" href="item.html" :title="item.title">{{ item.title }}</a>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
									<div class="operate">
										<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
										<a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页器 -->
					<Pagination
						:pageNo="searchParams.pageNo"
						:pageSize="searchParams.pageSize"
						:total="total"
						continues="5"
						@getPageNo="getPageNo"
					></Pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from './SearchSelector/SearchSelector';
import { mapGetters, mapState } from 'vuex';
export default {
	name: 'Search',
	data() {
		return {
			searchParams: {
				// 一级分类的id
				category1Id: '',
				// 二级分类的id
				category2Id: '',
				// 三级分类的id
				category3Id: '',
				// 三级分类id对应的名字
				categoryName: '',
				// 搜索关键字
				keyword: '',
				// 排序字段 初始状态为综合:降序
				order: '1:desc',
				// 当前第几页
				pageNo: 1,
				// 每页多少数据
				pageSize: 10,

				// 平台售卖属性的参数
				props: [],
				// 品牌
				trademark: ''
			},
			msg: 'ahdJKL'
		};
	},
	components: {
		SearchSelector
	},
	beforeMount() {
		// 在发请求之前整理完参数
		// 使用Object.assign合并参数
		Object.assign(this.searchParams, this.$route.query, this.$route.params);
	},
	mounted() {
		this.getData();
	},
	computed: {
		...mapGetters(['goodsList']),
		...mapState({
			total: state => state.search.searchList.total
		}),
		isOne() {
			return this.searchParams.order.split(':')[0] == 1;
		},
		isTwo() {
			return this.searchParams.order.indexOf('2') !== -1;
		},
		isAsc() {
			return this.searchParams.order.indexOf('asc') !== -1;
		},
		isDesc() {
			return this.searchParams.order.indexOf('desc') !== -1;
		}
	},
	methods: {
		/**
		 * 向服务器发请求获取search模块数据，同时根据参数的不同获取不同的数据进行展示
		 */
		getData() {
			// 派发一个action，获取search搜索数据
			this.$store.dispatch('getSearchList', this.searchParams);
		},
		/**
		 * 点击x删除categoryName和清空三级分类ID
		 */
		removeCategoryName() {
			// 如果值为undefiend，那么该值就不会带给服务器，因为该值可有可无，不是必填项
			this.searchParams.categoryName = undefined;
			this.searchParams.category1Id = undefined;
			this.searchParams.category2Id = undefined;
			this.searchParams.category3Id = undefined;
			// 自己跳自己，更改地址栏，如果有params参数，要带上
			this.$router.push({
				name: 'search',
				params: this.$route.params || undefined
			});
		},
		/**
		 * 点击x删除keyword和清空关键字
		 */
		removeKeyword() {
			this.searchParams.keyword = undefined;
			// 如果有query参数要带上
			this.$router.push({
				name: 'search',
				query: this.$route.query || undefined
			});
			// 通知兄弟钻进header清空keyWord内容
			this.$bus.$emit('removeKeyword');
		},
		/**
		 * 品牌的自定义事件
		 */
		trademarkInfo(val) {
			// 整理品牌字段的参数 品牌ID:品牌名称
			this.searchParams.trademark = Object.values(val).join(':');
			// 发请求获取数据
			this.getData();
		},
		/**
		 * 点x删除品牌面包屑
		 */
		removeTrademark() {
			this.searchParams.trademark = '';
			this.getData();
		},
		// 售卖属性的自定义事件
		attrInfo(val) {
			// 把对象转为字符串，服务器要的数据格式 属性Id:属性值:属性名称
			let str = Object.values(val).join(':');
			// 如果数组中已经存在就返回
			if (this.searchParams.props.indexOf(str) !== -1) return;
			// 不存在就存进去
			this.searchParams.props.push(str);
			// 发起请求获取最新数据
			this.getData();
		},
		// 点x删除点击的那一个
		removeAttrInfo(index) {
			// 点x删除点击的那一个
			this.searchParams.props.splice(index, 1);
			// 发起请求获取最新数据
			this.getData();
		},
		/**
		 * 排序操作
		 * 1：综合，2：价格，asc：升序，desc：降序
		 */
		changeOrder(val) {
			// 如果此时是综合，而传递过来的是2，那么就是true，代表是切换操作
			let isOrder = this.searchParams.order.indexOf(val) == -1;
			if (isOrder) {
				// 默认是降序
				this.searchParams.order = val + ':desc';
			} else {
				// 如果是升序，那么就变成降序
				this.searchParams.order = this.isAsc ? `${val}:desc` : `${val}:asc`;
			}
			// 发起请求获取最新数据
			this.getData();
		},
		/**
		 * 分页器组件的自定义事件
		 */
		getPageNo(val) {
			// 拿到分页器传来的页数，并赋值给pageNo
			this.searchParams.pageNo = val;
			// 发送请求
			this.getData();
		},
		/**
		 * 跳转到商品详情页
		 * @param {*} id 商品id
		 */
		goDetail(id) {
			this.$router.push(`/detail/${id}`);
		}
	},
	watch: {
		// 监听路由url信息是否发生变化
		$route: {
			handler() {
				// 初始化原来的对象,主要是清空三级分类的id
				Object.assign(this.searchParams, this.$options.data());
				// 整理参数
				Object.assign(this.searchParams, this.$route.query, this.$route.params);
				// 发送请求
				this.getData();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
